<template>
    <div>
        <div class="singers">
            <el-row>
                <el-col :span="4" v-for="(item, index) in hotSinger"
                        :key="index"
                        :offset="index > 0 && index !== 5 ? 1 : 0">
                    <el-card shadow="never" :body-style="{ padding: '0px' }">
                        <img :src="item.img1v1Url" class="image" @click="clickSingerItem(item.id)">
                        <div>{{item.name}}</div>
                    </el-card>
                </el-col>
            </el-row>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Box3",
        props:{
            hotSinger:{
                type: Array,
            }
        },
        data() {
            return {}

        },
        methods:{
            clickSingerItem(id) {
                this.$emit("clickSingerItem", id);
            },
        }
    }
</script>

<style scoped>
    .singers {
        margin: 20px 0;
        padding: 10px;
    }

    .image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        cursor:pointer
    }

    .image:hover {
        border: 1px solid #EBEEF5;
        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.2);
    }

    .el-card {
        border: none;
        position: relative;
    }
    .singers .el-row{
        margin-bottom: 20px;
    }
    .singers .el-row{
        margin-bottom: 20px;
    }
    .el-card div{
        position: absolute;
        top: 70%;
        width: 100%;
        text-align: center;
        color: white;
    }
</style>